<template>
    <div class="app-container">
        <el-table v-loading="loading" :data="shopList">
            <el-table-column label="商家logo" align="center">
                <template slot-scope="scope">
                    <el-image :src="scope.row.shoplogo" alt="" weight="20" :preview-src-list="srcList"
                        @click="look(scope.row)"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="商户名称" align="center" prop="shopname" />
            <el-table-column label="商家账号" align="center" prop="zkwlBusinessUsPC.shopnumber" width="150px" />
            <el-table-column label="商家等级" align="center" prop="type">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">诚信商家</span>
                    <span v-else-if="scope.row.type == 2">优选商家</span>
                    <span v-else-if="scope.row.type == 3">普通商家</span>
                    <span v-else>暂无</span>
                </template>
            </el-table-column>
            <el-table-column label="当前负责人" align="center" prop="zkwlBusinessUsPC.shopuser" />
            <el-table-column label="联系方式" align="center" prop="zkwlBusinessUsPC.shoptel" width="150px" />
            <!-- 1--婚纱摄影  2--婚纱礼服  3--婚礼策划  4--婚宴酒店 -->
            <el-table-column label="商家类型" align="center" prop="shopType"></el-table-column>
            <el-table-column label="店铺状态" align="center" prop="zkwlBusinessUsPC.state" type="text">
                <template slot-scope="scope">
                    <span v-if="scope.row.zkwlBusinessUsPC.state == '1'">禁用</span>
                    <span v-if="scope.row.zkwlBusinessUsPC.state == '0'">正常</span>
                </template>
            </el-table-column>
            <el-table-column label="最低价格" align="center" prop="shopminPrice" />
            <el-table-column label="最高价格" align="center" prop="shopmaxPrice" />
            <el-table-column label="客资余额" align="center" prop="shopcmMoney" />
            <el-table-column label="成交余额" align="center" prop="shopdealMoney" />
            <el-table-column label="商家地址" align="center" prop="shopaddress" width="180px" />
            <el-table-column label="店铺排序" align="center" prop="shopTop" />
            <!-- v-hasPermi="['system:business:edit']" -->
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" v-hasPermi="['shop:shopinfo:look']" icon="el-icon-edit" @click="handdleChakan">查看</el-button>
                    <el-button size="mini" type="text" v-hasPermi="['shop:shopinfo:xiaofeimingxi']" icon="el-icon-edit" @click="xiaofeimingxi(scope.row)">消费明细
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handdlechongzhi"
                        v-hasPermi="['shop:shopinfo:chongzhi']">充值</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 查看对话框 -->
        <el-dialog :visible.sync="open" width="800px" height="300px" append-to-body>
            <el-table :data="shopList">
                <el-table-column label="商家简介" align="center" prop="shopbrief" />
                <el-table-column label="客资余额" align="center" prop="shopcmMoney" />
                <el-table-column label="成交余额" align="center" prop="shopdealMoney" />
                <el-table-column label="客资扣费标准" align="center" prop="shopspendCmMoney" />
                <el-table-column label="成交扣费标准" align="center" prop="shopspendDealMoney" />
                <el-table-column label="成交扣费比率" align="center" prop="zkwlBusinessUsPC.shoprate" />
                <!-- <el-table-column label="成交订单扣费界限" align="center" prop="shopxiane" /> -->
            </el-table>
        </el-dialog>
        <!-- 充值对话框 -->
        <el-dialog :title="title" :visible.sync="open1" width="800px" append-to-body @close="close">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px"
                style="display: flex;align-content: center;flex-wrap: wrap;">
                <el-form-item prop="type" label="充值方式">
                    <el-select v-model="form.type" style="width:500px" placeholder="请输入充值方式" clearable>
                        <el-option v-for="dict in types" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="leixing" label="增减类型">
                    <el-select v-model="form.leixing" style="width:500px" placeholder="请输入增减类型" clearable>
                        <el-option v-for="dict in leixing" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="充值金额" prop="money">
                    <el-input v-model.trim="form.money" maxlength="10" placeholder="请输入充值金额" style="width:500px;" />
                </el-form-item>
                <el-form-item label="备注信息" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注信息" type="textarea" clearable style="width: 500px">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :disabled="lock" @click="submit">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 商家消费明细 -->
        <el-dialog :visible.sync="open2" width="800px" height="300px" append-to-body>
            <el-table :data="xiaofeiList">
                <el-table-column label="订单编号" align="center" prop="ordernum" />
                <!-- 12--客资扣费 13--平台佣金 14---取消订单 -->
                <el-table-column label="消费用途" align="center" prop="typename">
                </el-table-column>
                <el-table-column label="消费时间" align="center" prop="createtime">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createtime, '{YY}-{MM}-{DD} {hh}:{mm}:{ss}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="消费金额" align="center" prop="changemoney">
                    <template slot-scope="scope">
                        <span v-if="scope.row.typeid==1">+{{ scope.row.changemoney }}</span>
                        <span v-if="scope.row.typeid==0">-{{ scope.row.changemoney }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>
<script>
import { getOneBusness, payment, selectliushuiAllshop } from "@/api/business/userlist.js"
import { cancel } from "ali-oss/lib/common/parallel";
import dataVue from "../../system/dict/data.vue";
export default {
    data() {
        return {
            lock:false,
            srcList: [],
            xiaofeiList: [],
            // 是否显示弹出层
            open: false,
            open2: false,
            open1: false,
            // 遮罩层
            loading: true,
            // 总条数
            total: 0,
            title: '',
            loade: {
                pageNum: 1,
                pageSize: 10,
                shopid: this.$route.query.shopid
            },
            shopList: [],
            // 商家等级
            // 1--金 2--银 3--优选商家
            type: [{
                value: 1,
                label: '金'
            }, {
                value: 2,
                label: '银'
            }, {
                value: 3,
                label: '优选商家'
            }],
            // 充值类型
            // 1--充值客资余额 2--充值成交余额
            types: [{
                value: 1,
                label: '客资余额',
            }, {
                value: 2,
                label: '成交余额'
            }],
            // 增减类型
            leixing: [{
                value: 1,
                label: '增加'
            }, {
                value: 2,
                label: '减少'
            }],
            // 1--婚纱摄影  2--婚纱礼服  3--婚礼策划  4--婚宴酒店
            shopType: [{
                key: '1',
                label: '婚纱摄影'
            }, {
                key: '2',
                label: '婚纱礼服'
            }, {
                key: '3',
                label: '婚礼策划'
            }, {
                key: '4',
                label: '婚宴酒店'
            }],
            form: {
                type: '1',
                money: '',
                leixing: '1',
                shopid: this.$route.query.shopid,
                remark: ''
            },
            date1: {
                shopid: '',
                pagenum: 1,
                typeid: 0,
            },
            rules: {
                type: [{ required: true, message: '请选择充值方式', trigger: 'change' }],
                money: [{ required: true, max: 20, message: "充值金额不能为空", trigger: "blur" }, { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确的金额', trigger: 'blur' }],
                leixing: [{ required: true, message: '请选择充值方式', trigger: 'change' }]
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        close() {
            this.open1 = false;
            this.reset();
            this.$refs["form"].resetFields();
        },
        reset() {
            this.form = {
                type: 1,
                money: null,
                leixing: 1,
                shopid: this.$route.query.shopid,
                remark: ''
            }
        },
        // 获取店铺信息列表
        async getList() {
            this.loading = true;
            let res = await getOneBusness(this.loade);
            if (res.code == 200) {
                this.shopList = []
                this.shopList.push(res.data.data)
                this.loading = false;
            };
        },
        // 查看金额
        handdleChakan() {
            this.open = true
        },
        // 充值
        handdlechongzhi() {
            this.open1 = true;
            this.title = "充值"
            this.reset();
        },
        // 提交按钮
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.lock=true;
                    payment(this.form).then(response => {
                        if (response.data.code == 200) {
                            this.lock=false;
                            this.open1 = false;
                            this.getList();
                            this.reset();
                            this.$modal.msgSuccess(response.data.msg);
                        } else {
                            this.$modal.msgError(response.data.msg);
                        }
                    });
                }
            })

        },
        // 取消按钮
        cancel() {
            this.reset();
            this.$refs["form"].resetFields();
            this.open1 = false;
        },
        // 商家消费明细
        xiaofeimingxi(row) {
            this.date1.shopid = row.shopid;
            this.open2 = true;
            selectliushuiAllshop(this.date1).then(response => {
                if (response.code == 200) {
                    this.xiaofeiList = response.data;
                }
            })
        },
        look(row) {
            this.srcList.push(row.shoplogo);
        }
    },
}
</script>